<template>
  <div class="login">
    <div class="login-bgc">
      <div class="login-title">
        <p>欢迎您, 请登录</p>
        <img v-if="logo" :src="require('../assets/logo.png')" class="login-log" />
        <img
          v-else
          :src="`http://jk125.com/neoinfo/${this.logoUrl}`"
          alt="图片地址错误"
          class="login-log"
        />
      </div>
    </div>
    <div class="login-form">
      <div class="form-info">
        <van-field
          v-model="logindata.name"
          required
          clearable
          label="用户名"
          right-icon="question-o"
          placeholder="请输入用户名"
          error-message
          @click-right-icon="$toast('用户名')"
        />
        <van-field
          v-model="logindata.password"
          type="password"
          label="密码"
          placeholder="请输入密码"
          required
        />
        <van-button class="login-btn" round type="info" @click="login">立即登录</van-button>
        <!-- <div class="register">
          <router-link to="/reset">忘记密码?</router-link>
          <router-link to="/register">没有账号?免费注册</router-link>
        </div>-->
      </div>
    </div>
    <div class="foot-info">
      <p>一站式服务平台,为您的健康保驾护航</p>
      <p>All Right Reserved ©{{name}}</p>
      <p>
        技术支持:
        <a href="http://www.iyijia.cn">爱怡家</a>
      </p>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      logindata: {
        name: "",
        password: "",
        registrant: "2",
        datas: [] //所有数据源
      },
      name: "河南脉探数据科技有限公司",
      logoUrl: "",
      logo: true
    };
  },
  computed: {},
  methods: {
    ...mapMutations(["changeLogin", "changesysMenuTree"]),
    // 登录的方法
    login() {
      if (this.logindata.name == "" || this.logindata.password == "") {
        this.Tips("账号或密码不能为空!", "warning");
      } else {
        this.$http(this.api.login, this.logindata).then(res => {
          if (res.data.result == "true") {
            // 存入本地
            localStorage.setItem("username", this.logindata.name);
            this.changeLogin({
              Authorization: res.data.message
            });
            // 获取模块
            this.$http(this.api.sysMenuTree, {}).then(res => {
              if (res.status == 200) {
                if (res.data.result == "true") {
                  var routes = this.addDynamicMenuRoutes(
                    res.data.pageData.data[0].menu[0].childMenus
                  );
                  this.$router.addRoutes(routes);
                  this.changesysMenuTree({
                    sysMenuTree: res.data.pageData.data[0].menu[0].childMenus
                  });
                  // 跳转路由
                  this.$router.push({
                    name: "userinfo"
                  });
                }
              }
            });
            // 获取用户信息  存入vuex
            this.$http(this.api.selectUserKind).then(res => {
              if (res.data.result == "true") {
                this.$store.commit("changeuserinfo", {
                  userinfo: res.data.pageData.data[0]
                });
              }
            });
          } else {
            this.Tips(res.data.message, "warning");
          }
        });
      }
    },
    // 处理后台返回数据生成动态路由
    addDynamicMenuRoutes(menuList = []) {
      var temp = [],
        routes = []; //储存路由数据,存储处理好的路由对象
      for (let i = 0; i < menuList.length; i++) {
        if (menuList[i].childMenus && menuList[i].childMenus.length >= 1) {
          temp = temp.concat(menuList[i].childMenus);
        }
      }
      for (let j = 0; j < temp.length; j++) {
        var route = {
          path: "/" + temp[j].url,
          component: resolve =>
            require([`@/view/${temp[j].url.split("/")[1]}`], resolve),
          meta: {
            id: temp[j].id,
            icon: temp[j].icon,
            state: temp[j].state
          }
        };
        routes.push(route);
      }
      return routes;
    },
    test(id) {
      this.$http(this.api.getCustomIcon, { id }).then(res => {
        if (res.data.result == "true") {
          this.logo = false;
          this.logoUrl = res.data.pageData.data[0].iconUrl;
          this.name = res.data.pageData.data[0].systemName;
          localStorage.setItem(
            "company",
            JSON.stringify(res.data.pageData.data[0])
          );
        }
      });
    }
  },
  beforeRouteEnter: (to, form, next) => {
    // 通过vm访问this的实例
    next(vm => {
      // 获取这个id是否是自定义的logo
      if (/[0-9]$/g.test(to.query.id)) {
        // 如果是
        vm.test(to.query.id);
      }
    });
  }
};
</script>
<style scoped>
.login {
  width: 100%;
}
.login-title {
  position: absolute;
  top: 66px;
  left: 19px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: flex-end;
}
.login-log {
  width: 149px;
  height: 44px;
  background-size: contain;
  margin-left: 48px;
}
.login-bgc {
  width: 100%;
  height: 315px;
  background: linear-gradient(
    0deg,
    rgba(80, 234, 210, 1) 0%,
    rgba(8, 196, 230, 1) 100%
  );
}
.login-form {
  width: 337.5px;
  height: 244.5px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 5.5px 32.5px 0 rgba(0, 0, 0, 0.08);
  border-radius: 8.5px;
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
}
.login-btn {
  width: 250px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(60, 223, 216, 1),
    rgba(74, 231, 211, 1)
  );
  border-radius: 18px;
  border: none;
  margin-left: 25.5px;
  display: block;
  line-height: 5px;
  font-size: 15px;
  margin-top: 18px;
}
.form-info {
  padding: 25px 18px 19px;
}
.register {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.register a {
  color: #08c4e6;
}
.foot-info {
  width: 276.5px;
  height: 71px;
  font-size: 12px;
  color: #ccc;
  position: absolute;
  left: 49.5px;
  top: 566px;
  line-height: 25px;
  text-align: center;
}
.foot-info > p > a {
  color: #ccc;
  text-decoration: underline;
}
</style>